<template>
    <div>
        <div class="product-item">
            <div class="detail-product">
                <img :src="pro.smallImg" alt="">
                <div class="right-box">
                    <div class="pro-name">{{pro.product.name}}</div>
                    <div class="price-bu">
                        <div class="price">&yen;{{pro.product.Price}}</div>
                        <div class="bu">
                            X{{pro.count}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "productDetail",
        props: {
            pro: Object,
        }
    }
</script>

<style scoped>
    .product-item {
        height: 100px;
        margin-bottom: 10px;
        border-radius: 10px;
        background: white;
        display: flex;
        align-items: center;

    .choose {
        width: 35px;
        margin-left: 10px;
    }

    }

    .detail-product {
    //background: pink;
        height: 100px;
        display: flex;
        flex: 1;
    //padding: 10px;
    img {
        width: 100px;
        height: 100px;
    }

    .right-box {
        /*flex: 1;*/
        height: 80px;
        padding: 10px;
    //background: skyblue;
    .pro-name {
        height: 40px;
        text-align: left;
        font-size: 16px;
    //background: pink;
        width: 200px;
    //多文本文字溢出
    text-overflow: ellipsis;
        word-wrap: break-spaces;
        overflow: hidden;
        display: -webkit-box;
    //行数
    -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price-bu {
        height: 40px;
    //text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;

    .price {
        font-size: 15px;
    }
    }

    }
    }
</style>
